<template>
	<view class="con">
		<!-- 顶部栏 -->
		<view class="list_header">
			<view class="header_con">
				<view class="header_img">
					<image class="avatar" :src="videoData.thumb_pic"></image>
				</view>
				<view class="header_txt">
					{{videoData.course_title}}
					{{videoData.course_desc}}
				</view>
			</view>
			<!-- video组件 -->
			<video class="header_video" autoplay="true" objectFit="cover" id="myVideo" v-if="currentSrc"
				:src="currentSrc">
			</video>
			<view class="header_bg">
				<image class="header_bg_img" mode="widthFix" :src="videoData.thumb_pic"></image>
			</view>
		</view>
		<!-- 播放列表 -->
		<view>
			<template v-for="(item , index) in videoData.course_videos" :key="index">
				<view :class="currentIndex==index+1?'list active':'list'" @tap="play(index+1,item.video_url)">
					<text class="list_text"> {{item.title}}</text>
					<image class="playBtn" src="/static/img/guidance/playBtn.svg"></image>
				</view>
			</template>
		</view>
		<!-- 下载按钮 -->
		<view class="submit">
			<button @tap="download(videoData.courseware)" class="submit-btn" style="width:660rpx">课程
				资源下载</button>
		</view>
	</view>
</template>

<script setup>
	import {
		inject,
		ref
	} from 'vue'
	import {
		req
	} from '/hooks/req.js'
	const $root = inject('$root')
	//视频列表数据
	let videoData = ref({})
	// 当前播放视频索引
	let currentIndex = ref(0)
	//当前播放视频地址
	let currentSrc = ref("")
	const getVideoData = () => {
		req($root + `/guidance/`)
			.then(result => {
				videoData.value = result.data.data
			})
	}
	const play = (index, src) => {
		currentIndex.value = index
		currentSrc.value = src
	}
	getVideoData()
	const download = (path) => {
		uni.downloadFile({
			// url: path,
			url: 'http://res.aihyzh.com/software/vue/res/document.pdf',
			success(res) {
				uni.openDocument({
					filePath: res.tempFilePath,
					fileType: 'pdf',
					showMenu: true
				})
			},
			fail(err) {
				uni.showToast({
					icon: 'error',
					title: '下载失败'
				});
			}
		})
	}
</script>

<style scope>
	.list_header {
		height: 180px;
		overflow: hidden;
		position: relative;
	}

	.header_con {
		position: absolute;
		height: 100%;
		z-index: 999;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		box-sizing: border-box;
	}

	.header_video {
		width: 100%;
		height: 180px;
		position: absolute;
		z-index: 1000;
		left: 0;
		top: 0;
	}

	.header_txt {
		color: white;
		font-size: 14px;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		line-height: 1.5;
		-webkit-box-orient: vertical;
	}

	.avatar {
		width: 280rpx;
		height: 280rpx;
		margin-right: 15px;
	}

	.header_bg {
		width: 150%;
		height: 150%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		filter: blur(30px) brightness(0.9);
	}

	.header_bg_img {
		width: 100%;
	}

	/* 播放列表 */
	.list {
		height: 50px;
		border-bottom: 1px dashed #d7d7d7;
		padding: 15px 20px;
		color: #3d3d3d;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.list_text {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 15px;
	}

	.playBtn {
		width: 22px;
	}

	/* 激活状态 */
	.active {
		color: orangered;
	}
</style>